/* 使用TDesign设计系统变量 */
@import '/variable.less';
/* 使用TDesign样式变量 */
page {
  background-color: var(--td-bg-color-page, #f3f3f3);
  color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
  font-family: var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular);
  font-size: var(--td-font-size-base, 28rpx);
  line-height: 1.5;
}

.container {
  max-width: 750rpx;
  margin: 0 auto;
  padding: 0 30rpx;
}

/* 轮播图 */
.swiper-container {
  width: 100%;
  height: 640rpx;
  overflow: hidden;
  margin-bottom: -160rpx;
  position: relative;
  z-index: 1;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--td-font-white-1, #ffffff);
  font-size: var(--td-font-size-xl, 40rpx);
  font-weight: bold;
  text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
}

.slide-1 {
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
}

.slide-2 {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.slide-3 {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.swiper-indicators {
  position: absolute;
  bottom: 40rpx;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 12rpx;
}

.indicator {
  width: 12rpx;
  height: 12rpx;
  border-radius: var(--td-radius-circle, 50%);
  background: rgba(255, 255, 255, 0.5);
  transition: all var(--td-anim-duration-base, 0.2s) var(--td-anim-time-fn-easing, cubic-bezier(0.38, 0, 0.24, 1));
}

.indicator.active {
  width: 36rpx;
  border-radius: var(--td-radius-small, 6rpx);
  background: var(--td-font-white-1, #ffffff);
}

.content-wrapper {
  position: relative;
  z-index: 2;
}

/* 卡片样式 */
.card {
  background: var(--td-bg-color-container, #ffffff);
  border-radius: var(--td-radius-extraLarge, 24rpx);
  padding: 40rpx;
  margin-bottom: 30rpx;
  box-shadow: var(--td-shadow-4, 0 4rpx 16rpx 0 rgba(0, 0, 0, 0.06));
}

/* 用户信息 */
.user-info {
  display: flex;
  flex-direction: column;
}

.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.avatar {
  width: 128rpx;
  height: 128rpx;
  border-radius: var(--td-radius-circle, 50%);
  background: linear-gradient(135deg, #ffd89b, #19547b);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--td-font-white-1, #ffffff);
  font-size: var(--td-font-size-xl, 40rpx);
  margin-right: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.user-text {
  flex: 1;
}

.user-name {
  font-size: var(--td-font-size-l, 36rpx);
  font-weight: bold;
  margin-bottom: 12rpx;
  color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
}

.user-id {
  font-size: var(--td-font-size-s, 24rpx);
  color: var(--td-text-color-placeholder, rgba(0, 0, 0, 0.4));
}

.user-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32rpx;
}

.detail-item {
  background: var(--td-bg-color-secondarycontainer, #f3f3f3);
  border-radius: var(--td-radius-large, 18rpx);
  padding: 32rpx;
  text-align: center;
  transition: all var(--td-anim-duration-base, 0.2s) var(--td-anim-time-fn-easing, cubic-bezier(0.38, 0, 0.24, 1));
}

.detail-item:active {
  background: var(--td-bg-color-secondarycontainer-active, #e7e7e7);
  transform: translateY(-4rpx);
  box-shadow: 0 8rpx 16rpx rgba(0, 82, 217, 0.1);
}

.detail-label {
  font-size: var(--td-font-size-s, 24rpx);
  color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
  margin-bottom: 16rpx;
}

.detail-value {
  font-size: var(--td-font-size-l, 36rpx);
  font-weight: bold;
  color: var(--td-brand-color, #0052d9);
}

/* 合并后的功能区样式 */
.service-card {
  background: var(--td-bg-color-container, #ffffff);
  border-radius: var(--td-radius-extraLarge, 24rpx);
  margin-bottom: 30rpx;
  box-shadow: var(--td-shadow-4, 0 4rpx 16rpx 0 rgba(0, 0, 0, 0.06));
  overflow: hidden;
}

.dining-section {
  padding: 40rpx 40rpx 32rpx;
  background: var(--td-bg-color-secondarycontainer, #f3f3f3);
}

.member-section {
  padding: 32rpx 40rpx 40rpx;
  background: var(--td-bg-color-container, #ffffff);
}

.dining-options {
  display: flex;
  justify-content: space-between;
}

.option {
  flex: 1;
  text-align: center;
  padding: 32rpx 16rpx;
  border-radius: var(--td-radius-large, 18rpx);
  margin: 0 12rpx;
  background: var(--td-bg-color-container, #ffffff);
  transition: all var(--td-anim-duration-base, 0.2s) var(--td-anim-time-fn-easing, cubic-bezier(0.38, 0, 0.24, 1));
  border: 2rpx solid var(--td-border-level-1-color, #e7e7e7);
  box-shadow: var(--td-shadow-4, 0 4rpx 16rpx 0 rgba(0, 0, 0, 0.06));
}

.option:first-child {
  margin-left: 0;
}

.option:last-child {
  margin-right: 0;
}

.option.active {
  background: var(--td-brand-color, #0052d9);
  color: var(--td-text-color-anti, #ffffff);
  border-color: var(--td-brand-color, #0052d9);
  box-shadow: 0 8rpx 24rpx rgba(0, 82, 217, 0.3);
}

.option-icon {
  font-size: var(--td-font-size-xxl, 72rpx);
  margin-bottom: 16rpx;
}

.option-name {
  font-size: var(--td-font-size-base, 28rpx);
  font-weight: 500;
}

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32rpx;
}

.feature {
  text-align: center;
  padding: 40rpx 16rpx;
  border-radius: var(--td-radius-large, 18rpx);
  background: var(--td-bg-color-secondarycontainer, #f3f3f3);
  transition: all var(--td-anim-duration-base, 0.2s) var(--td-anim-time-fn-easing, cubic-bezier(0.38, 0, 0.24, 1));
}

.feature:active {
  background: var(--td-bg-color-secondarycontainer-active, #e7e7e7);
  transform: translateY(-4rpx);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
}

.feature-icon {
  font-size: var(--td-font-size-xxl, 72rpx);
  color: var(--td-brand-color, #0052d9);
  margin-bottom: 20rpx;
}

.feature-name {
  font-size: var(--td-font-size-base, 28rpx);
  font-weight: 500;
}

.poster {
  width: 100%;
  border-radius: var(--td-radius-extraLarge, 24rpx);
  overflow: hidden;
  margin-top: 16rpx;
  transition: all var(--td-anim-duration-base, 0.2s) var(--td-anim-time-fn-easing, cubic-bezier(0.38, 0, 0.24, 1));
}

.poster:active {
  transform: translateY(-4rpx);
  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.1);
}

.poster image {
  width: 100%;
  display: block;
}

.section-title {
  font-size: var(--td-font-size-l, 36rpx);
  font-weight: bold;
  margin-bottom: 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-title-text {
  display: flex;
  align-items: center;
}

.section-title-text::before {
  content: '';
  display: inline-block;
  width: 8rpx;
  height: 32rpx;
  background: var(--td-brand-color, #0052d9);
  border-radius: var(--td-radius-small, 6rpx);
  margin-right: 16rpx;
}

.more-link {
  font-size: var(--td-font-size-s, 24rpx);
  color: var(--td-text-color-placeholder, rgba(0, 0, 0, 0.4));
  font-weight: normal;
}

.divider {
  height: 2rpx;
  background: var(--td-border-level-1-color, #e7e7e7);
  margin: 0 40rpx;
}

.badge {
  display: inline-block;
  background: var(--td-error-color, #d54941);
  color: var(--td-text-color-anti, #ffffff);
  font-size: var(--td-font-size-xs, 20rpx);
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  margin-left: 16rpx;
  vertical-align: top;
}